
import React, { useEffect, useState } from 'react'
import { Table, Divider, Button, Input, Space, Modal, Form, message, Tag } from 'antd';
import axios from 'axios';
const types = ["无异常", "运行状态异常", "通信异常", "安全漏洞异常", "版本过低异常", "微服务状态异常"]
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: "center",
    fixed: "left",
    width: "5%",
    render: (text, record, index) => {
      return <span style={{ fontSize: "12px" }}>{index + 1}</span>
    }
  },
  {
    title: '服务名称',
    dataIndex: 'appname',
    key: 'appname',
    align: "center",
    fixed: "left",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '操作',
    dataIndex: 'appstate',
    key: 'appstate',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text === 0 ? "启动" : "关闭"}</span>
    }
  },
  {
    title: "操作时间",
    dataIndex: 'optime',
    key: 'optime',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  }
];
const columns1 = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: "center",
    width: "5%",
    render: (text, record, index) => {
      return <span style={{ fontSize: "12px" }}>{index + 1}</span>
    }
  },
  {
    title: '告警信息',
    dataIndex: 'alarminfo',
    key: 'alarminfo',
    align: "left",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '告警类型',
    dataIndex: 'alarmtype',
    key: 'alarmtype',
    align: "left",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{types[text]}</span>
    }
  },
  {
    title: '告警时间',
    dataIndex: 'alarmtime',
    key: 'alarmtime',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  }
];

export default function Log() {
  const [dataSource, setDataSource] = useState([])
  const [dataSource1, setDataSource1] = useState([])
  useEffect(() => {
    axios.get("/log/selectall").then(res => {
      setDataSource(res.data)
    })
    axios.get("/alarm/selectall").then(res => {
      setDataSource1(res.data)
    })
  }, [])
  return (
    <div>
      <Divider orientation="left" style={{ fontSize: "18px", margin: "15px 0" }}>服务日志</Divider>
      <Table
        columns={columns} dataSource={dataSource} style={{ margin: "5px 0 0 0" }}
        rowKey={(item) => item.id}
        pagination={{}}
        size='small'
        scroll={{ x: 1200 }}
      >
      </Table>
      <Divider orientation="left" style={{ fontSize: "18px", margin: "15px 0" }}>异常记录</Divider>
      <Table
        columns={columns1} dataSource={dataSource1} style={{ margin: "5px 0 0 0" }}
        rowKey={(item) => item.id}
        pagination={{}}
        size='small'
        scroll={{ x: 1200 }}
      >
      </Table>
    </div>
  )
}
